<template>
    <div class="feeds">
        <div class="top_title">
            <span class="iconfont icon-fanhui" @click.stop="back"></span>
            免费
        </div>
        <swiper :options="swiperOptions1" class="swiper">
            <swiper-slide v-for="b in bannerList" :key="b.image_url">
                <van-image
                    lazy-load
                    width="46vw"
                    height="61.3vw"
                    fit="cover"
                    :src="`${b.image_url}@300w.jpg`"
                />
            </swiper-slide>
        </swiper>
        <div class="feeds_content" v-if="feedList.length">
            <type-three
                :todayHot="feedList[1]"
                :typeThreeID="typeThreeID[0]"
                :typeThree="typeThree[0]"
            ></type-three>

            <type-seven :todayHot="feedList[2]" :typeSeven="typeSeven[0]"></type-seven>
            <div class="type_eight">
                <type-eight :todayHot="feedList[3]" :typeEight="typeEight"></type-eight>
            </div>

            <type-three
                :todayHot="feedList[4]"
                :typeThreeID="typeThreeID[1]"
                :typeThree="typeThree[1]"
            ></type-three>

            <type-three
                :todayHot="feedList[5]"
                :typeThreeID="typeThreeID[2]"
                :typeThree="typeThree[2]"
            ></type-three>

            <type-three
                :todayHot="feedList[6]"
                :typeThreeID="typeThreeID[3]"
                :typeThree="typeThree[3]"
            ></type-three>
            <div class="more" v-if="ismore">没有更多了！！！</div>
        </div>
        <van-loading v-else size="24px" vertical text-color="#0094ff" color="#0094ff"
            >加载中...</van-loading
        >
    </div>
</template>

<script>
import router from "@/router";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import TypeThree from "@/components/typeThree.vue";
import TypeSeven from "@/components/typeSeven..vue";
import TypeEight from "@/components/typeEight.vue";
export default {
    name: "FeedView",
    components: {
        Swiper,
        SwiperSlide,
        TypeThree,
        TypeEight,
        TypeSeven,
    },
    data() {
        return {
            feedList: [],
            bannerList: [],
            typeThree: [],
            typeThreeID: [],
            typeSeven: [],
            typeEight: [],
            loading: false,
            ismore: false,
            swiperOptions1: {
                //swiper轮播图配置
                speed: 2000,
                autoplay: {
                    delay: 0,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                slidesPerView: 2,
                spaceBetween: 30,
                centeredSlides: true,
                pauseOnMouseEnter: true,
                parallax: true,
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            },
        };
    },
    created() {
        this.getFeedList();
    },
    methods: {
        back() {
            router.back();
        },
        async getFeedList() {
            await this.axios.get(`GetClassPageLayout?tabId=17`).then((res) => {
                this.feedList = res.layout;
                this.getBannerList();
                this.getTypeThree();
                this.getTypeSeven();
                this.getTypeEight();
            });
        },
        async getBannerList() {
            for (let i = 0; i < this.feedList.length; i++) {
                if (this.feedList[i].type == "0") {
                    await this.axios
                        .get(`GetClassPageHomeBanner?id=${this.feedList[i].id}`)
                        .then((res) => {
                            this.bannerList = res.banner;
                        });
                }
            }
        },
        async getTypeThree() {
            for (let i = 0; i < this.feedList.length; i++) {
                if (this.feedList[i].type == "3") {
                    this.typeThreeID.push(this.feedList[i].id);
                    await this.axios
                        .get(
                            `GetClassPageSixComics?id=${this.feedList[i].id}&pageNum=1&pageSize=6&isAll=0`
                        )
                        .then((res) => {
                            this.typeThree.push(res.roll_six_comics);
                        });
                }
            }
        },
        async getTypeSeven() {
            for (let i = 0; i < this.feedList.length; i++) {
                if (this.feedList[i].type == "7") {
                    await this.axios
                        .get(`GetClassPageComicsRank?id=${this.feedList[i].id}`)
                        .then((res) => {
                            this.typeSeven.push(res.rank);
                        });
                }
            }
        },
        async getTypeEight() {
            for (let i = 0; i < this.feedList.length; i++) {
                if (this.feedList[i].type == "8") {
                    await this.axios
                        .get(`GetClassPageHighEnergyEp?id=${this.feedList[i].id}`)
                        .then((res) => {
                            this.typeEight = res.eps;
                            this.ismore = true;
                        });
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.feeds {
    .top_title {
        text-align: center;
        font-size: 16px;
        line-height: 45px;
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        z-index: 100;
        background: #fff;
        border-bottom: 1px solid #eee;
        span {
            position: absolute;
            left: 12px;
            top: 0;
            bottom: 0;
        }
    }
    .swiper {
        text-align: center;
        margin-top: 70px;
        img {
            width: 100%;
            border-radius: 10px;
        }
    }
    .feeds_content {
        overflow: hidden;
    }
    .more {
        text-align: center;
        height: 30px;
        line-height: 30px;
        opacity: 0.8;
    }
}
</style>
